<template>
  <div class="swiperContainer">
    <Swiper ref="mySwiper">
      <swiper-slide v-for="val in data[0].itemMap" :key="(val.img as string)" class="sliderContainer" :swiper-ref="sw"
                    @click="toDetail"
      >
        <img :src="val.img" class="carouselImg">
        <div class="sliderDescContainer">
          <span class="sliderTitle">
            {{ val.title }}
          </span>
        </div>
      </swiper-slide>
      <template #pagination class="swiper-pagination" />
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ItemMapArr } from '~/typings/data'
import { ref } from 'vue'
import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Swiper as SwiperCore, Autoplay, Pagination } from 'swiper'
import 'swiper/components/pagination/pagination.less'
const Router = useRouter()
SwiperCore.use([Autoplay, Pagination])
defineProps<{
  data: ItemMapArr[]
}>()
const sw = ref<any>()
const toDetail = () => {
  return
  Router.push('/detail/cbba934b14f747049187')
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
